import { useEffect, useState } from 'react';
import { useRecoilState } from 'recoil';
import { ligthDeg } from '../../store/store';
import styles from './index.module.scss';
const Light = () => {
    const [deg, setDeg] = useRecoilState(ligthDeg)
    const [speed,setSpeed] = useState(1)
    const [active,setActive] = useState(true)
    console.log(speed);
    
    useEffect(() => {
        const timer = setTimeout(() => {
            if(!active){
                return
            }
            setDeg(deg >= 360 ? 0 : deg + 1)
        }, 1000 - speed*100)
        return () => {
            clearTimeout(timer)
        }
    }, [active, deg, setDeg, speed])
    return (
        <>
            <div className={styles.tools}>
                <div className={styles.tool} onClick={()=>speed<9?setSpeed(speed+1):null}> {speed===9?"⌒":"加速"}</div>
               <div className={`${speed>1&&styles.tool} ${speed>1&&styles.out} ${speed===1&&styles.die}`}>{speed===1?"min":speed===9?"max":speed}</div>
                <div className={styles.tool} onClick={()=>speed>1?setSpeed(speed-1):null}> {speed===1?"⌒":"减速"}</div>
                
                <div className={styles.tool} onClick={()=>setActive(false)}>{active?"暂停":"⌒"}</div>
                <div className={styles.tool} onClick={()=>setActive(true)}>{!active?"开始":"⌒"}</div>
                <div className={`${!active&&styles.stop} ${active&&styles.play}`}> {active?"":"II"}</div>
            </div>
            <div
                className={styles.box}
                style={{ rotate: `${deg}deg`, transition: ` ${deg === 0 ? "all 0s" : ""}` }} >
                <div className={styles.point}></div>
            </div>
        </>

    )
}


export default Light